<template>
  <el-card style="margin: 20px">
    <div class="steps">
      <el-steps :active="active" finish-status="success" align-center="center">
        <el-step title="基础信息" />
        <el-step title="分配库位" />
      </el-steps>
    </div>
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
      <div class="item">
        <el-form-item label="货主编号" prop="no">
          <el-input v-model="ruleForm.no" :disabled="true" />
        </el-form-item>
        <el-form-item label="货主名称" prop="owner">
          <el-input v-model="ruleForm.owner" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="联系人" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="联系人电话" prop="mobile">
          <el-input v-model="ruleForm.mobile" placeholder="请输入" />
        </el-form-item>
      </div>

      <div class="item">
        <el-form-item label="联系人邮箱" prop="email">
          <el-input v-model="ruleForm.email" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="省/市/区" prop="area">
          <el-cascader
            v-model="ruleForm.location"
            style="width: 100%"
            placeholder="请选择"
            :options="allData"
            :props="props"
            clearable
          />
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input v-model="ruleForm.address" placeholder="请输入" />
        </el-form-item>
      </div>

      <div class="item">
        <el-form-item label="备注" prop="remark">
          <el-input v-model="ruleForm.desc" type="textarea" placeholder="请输入" />
        </el-form-item>
      </div>

      <el-form-item>
        <el-button type="primary" round>返回</el-button>
        <el-button type="warning" round>下一步</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import allData from '@/utils/province-city-area'
export default {
  data() {
    return {
      active: 0,
      ruleForm: {
        owner: '',
        name: '',
        moblie: '',
        email: '',
        area: '',
        address: '',
        remark: '',
        location: ''
      },
      rules: {
        owner: [
          { required: true, message: '请输入货主名称', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入联系人名称', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入联系人手机号', trigger: 'blur' }
        ]
      },
      allData,
      props: {
        value: 'label',
        label: 'label'
      }
    }
  },
  methods: {
    next() {
      if (this.active++ > 2) this.active = 0
    }
  }
}
</script>

<style scoped lang="scss">
  .steps{
    width: 80vw;
    margin: 30px;
  }

  .item{
    display: flex;
    > *{margin: 0px 10px;}
    margin: 50px 0;
  }
</style>
